<template>
  <div id="app">
    <div class="content">
      <router-view />
    </div>
    <div class="bottom">
      <router-link to="/" tag="div">商品列表</router-link>
      <router-link to="/shopcart" tag="div">购物车<span class="caution" v-if="this.$store.state.shopcart.list.length">{{this.$store.state.shopcart.list.length||' '}}</span></router-link>
    </div>
  </div>
</template>
<script type="text/javascript">
	export default {
		name:"App"
	}
</script>
<style>
html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-size: 12px;
  box-sizing: border-box;
}
</style>

<style scoped>
.caution{
	display: inline-block;
	width: 15px;
	height: 15px;
	background-color: #FF0000;
	color: white;
	line-height: 15px;
	text-align: center;
	border: #FF0000 1px solid;
	border-radius: 15px;
	margin-left: 5px;
}
#app {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
  overflow-y: scroll;
}
.bottom {
  height: 40px;
  display: flex;
  border-top: 1px solid #ccc;
}
.bottom > div {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #444;
}
.bottom > div:not(:last-child) {
  border-right: 1px solid #ccc;
}
.bottom > div.router-link-exact-active {
  color: #f18741;
  font-weight: bold;
  background: #fef5ef;
}
</style>
